<template>
  <div class="container">
    <div class="banner">
      <img :src="bannerImg" alt="" mode="widthFix" class="banner_img">
    </div>
    <div class="title">
      <van-cell-group>
        <van-cell :title="nodes.name" :value="nodes.labelprice" size="large" :label="nodes.name" />
      </van-cell-group>
    </div>
    <div class="details">图文详情</div>
    <div class="info">
      <wxParse :content="nodes.content" @preview="preview" @navigate="navigate" />
      <!-- <van-submit-bar :price="nodes.price" button-text="购买" @tap="buyBtn" /> -->
      <div class="footer flex">
        <div class="words flex-item"><span>合计：</span>￥{{nodes.price}}</div>
        <van-button type="danger" @tap="buyBtn" class="sharebtn">购买</van-button>
      </div>
    </div>
    <van-action-sheet :show="usershow" title="支付确认" @close="onClose" close-on-click-overlay="true">
      <view class="van-field">
        <van-cell-group>
          <van-field :value="username" @input="userinput" clearable label="手机号" placeholder="请输入手机号" />
        </van-cell-group>
        <div class="van-btn">
          <van-button type="danger" style="width:100%;!important;" @click="submit">提交</van-button>
        </div>
      </view>
    </van-action-sheet>
    <van-action-sheet :show="newusershow" title="新用户注册" @close="onClose" close-on-click-overlay="true">
      <view class="van-field">
        <van-cell-group>
          <van-field :value="guestname" @input="guestnameinput" clearable label="用户姓名" placeholder="用户姓名" />
        </van-cell-group>
        <van-radio-group :value="sex">
          <van-cell-group>
            <van-cell title="男" clickable data-name="1" @click="onClick">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="女" clickable data-name="0" @click="onClick">
              <van-radio name="0" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="van-btn">
          <van-button type="danger" style="width:100%;!important;" @click="addSubmit">提交</van-button>
        </div>
      </view>
    </van-action-sheet>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import wxParse from 'mpvue-wxparse'
export default {
  data () {
    return {
      expandingList: [],
      shopid: 0,
      listId: 0,
      nodes: '',
      bannerImg: '',
      usershow: false,
      username: '',
      workerid: 0,
      orcode: '',
      newusershow: false,
      guestname: '',
      sex: '1'
    }
  },
  components: {
    wxParse
  },
  onLoad (option) {
    console.log(option)
    if (option) {
      this.listId = option.shareid
      this.workerid = option.workerid
      this.orcode = option.orcode
      this.shopid = option.shopid
    }
  },
  async onShow () {
    this.getinfo()
  },
  methods: {
    async getinfo () {
      let userId = this.workerid;
      let ret = await api.expandingCustomersDetails({ user_id: userId, list_id: this.listId });
      if (ret.code === '100') {
        this.nodes = ret.data
        this.nodes.price = Number(parseFloat(this.nodes.price).toFixed(2))
        this.nodes.labelprice = `￥${parseFloat(this.nodes.price).toFixed(2)}`
        wx.setNavigationBarTitle({
          title: ret.data.name
        })
        let imgReg = /<img.*?(?:>|\/>)/gi;
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // eslint-disable-line
        let imgArr = ret.data.content.match(imgReg);
        if (imgArr) {
          console.log(111)
          let imgInfo = [];
          for (var i = 0; i < imgArr.length; i++) {
            var src = imgArr[i].match(srcReg);
            imgInfo.push(src[1])
          }
          this.bannerImg = imgInfo[0]
        }
      }
    },
    buyBtn (e) {
      this.usershow = true
    },
    onClose () {
      this.usershow = false
    },
    onClick (e) {
      console.log(e)
      this.sex = e.mp.currentTarget.dataset.name;
    },
    goDetails (e) {
      console.log(e)
      // url="/pages/guest/expandingCustomersDetails/expandingCustomersDetails?id="
    },
    preview (src, e) {
      // do something
    },
    navigate (href, e) {
      // do something
    },
    userinput (e) {
      this.username = e.mp.detail
    },
    guestnameinput (e) {
      this.guestname = e.mp.detail
    },
    sexChange (e) {
      console.log(e)
    },
    async submit () {
      console.log(this.username)
      if (!this.username) {
        Toast('请填写手机号码！');
        return;
      }
      let token = wx.getStorageSync('token');
      let ret = await api.customerRegistration({ username: this.username, orcode: this.orcode, shopid: this.shopid, token: token });
      console.log(ret)
      if (ret.code === '100') {

      } else {
        this.usershow = false
        this.newusershow = true
      }
    },
    async addSubmit () {
      if (!this.guestname) {
        Toast('请填写顾客姓名！');
        return;
      }
      let token = wx.getStorageSync('token');
      let ret = await api.customerAdd({ username: this.username, guestname: this.guestname, sex: this.sex, departmentid: this.shopid, token: token });
      console.log(ret)
    }
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    } else {
      console.log(res.target)
    }
    return {
      imageUrl: this.bannerImg,
      title: this.nodes.name,
      path: `/pages/shop/shareDetails/shareDetails?shareid=${this.shareid}&workerid=${this.workerid}&orcode=${this.orcode}&shopid=${this.shopid}`
    }
  }
}
</script>

<style scoped>
.container {
}
.cell-group {
  width: 100%;
}
.info {
  width: 100%;
  padding: 20rpx;
  background: #fff;
}
.banner {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.banner_img {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.title {
  width: 100%;
}
.details {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
  text-align: center;
  color: #ff4444;
  font-size: 32rpx;
  font-weight: 600;
  background: #fff;
}
.van-btn {
  margin-top: 20rpx;
}
.footer {
  width: 100%;
  height: 100rpx;
  background: #fff;
  line-height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 10rpx 10rpx 30rpx #333;
}
.footer .words {
  text-align: right;
  padding-right: 20rpx;
  font-size: 28rpx;
}
.footer .words span {
  color: #ff4444;
}
</style>
<style>
@import url('~mpvue-wxparse/src/wxParse.css');
.wxParse .p {
  font-size: 32rpx;
  color: #333;
}
.van-cell__title {
  color: #ff4444;
  font-weight: 600;
  font-size: 32rpx;
  white-space: nowrap;
}
.van-cell__label {
  margin-top: 20rpx;
}
.van-cell__value {
  color: #ff6600;
}
.van-button {
  width: 100%;
  height: 106rpx !important;
}
</style>